<!-- 事件处理）  -->

<script setup>
    
    import { ref } from 'vue';
   
    let count= ref(0);

    function alertFunc(){
        alert(count.value);
    }


    function addFunc(x,y){
        alert(x+y);
    }

    function showFunc(msg){
        alert(msg);
    } 



</script>

<template>
    {{ count }}<br/>
<!-- <button v-on:click="">点一下</button>   普通写法，下面是简写-->
    <button @click="count++">人数+1</button><br/>
    <button @click="alert(count)">弹出框：人数(错误写法)</button><br/>
    <button @click="alertFunc">弹出框：人数（正确写法）</button><br/>
    <!-- <button @click="alertFunc()">弹出框：人数（正确写法）</button><br/>  小括号可以省略 -->
    <button @click="addFunc(1,2)">弹出框：加法运算（正确写法）</button><br/>
    
    <hr/>

    <div style="width: 100px;height: 100px;background-color: red;" @click="showFunc('father')">
        father
        <!-- .stop   不会向上传递  点击 son  不会  让 father 被触发    -->
        <div style="width: 50px;height: 50px;background-color: yellow;" @click.stop="showFunc('son')">
            son
        </div>
    <!--
            可以使用 链式写法，实现 不前进（prevent） 不传递（stop）
    -->
        <a href="http://www.baidu.com"  @click.prevent.stop="showFunc('a标签')">百度一下</a>

    </div>
     <!-- prevent 目的  让 原先的提交方式 失效，比如 a标签的href 提交  form表单同理   -->
     <a href="http://www.baidu.com"  @click.prevent="showFunc('a标签')">百度一下</a>

     <!-- 只让点一下 .once   -->
     <button @click.once="showFunc('只让点一下')">只让点一下</button>
</template>


